<template>
  <div class="login">
    <div class="login-box">
      <div class="systemName"></div>
      <div class="loginForm">
        <el-form :model="loginForm">
          <el-form-item label="用户名:" prop="username">
            <el-input
              prefix-icon="el-icon-user"
              type="text"
              v-model="loginForm.username"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码:" prop="password">
            <el-input
              prefix-icon="el-icon-lock"
              type="password"
              v-model="loginForm.password"
              autocomplete="off"
              @blur="bigChar = false"
              @keyup.native="onkeyup"
              @keydown.native="onkeydown"
            ></el-input>
            <el-tag type="warning" v-if="bigChar">大写已锁定</el-tag>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="goLogin">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="chageSkin">

      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          {{ skinText }}<i class="el-icon-s-tools"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="1">主题一</el-dropdown-item>
          <el-dropdown-item command="2">主题二</el-dropdown-item>
          <el-dropdown-item command="3">主题三</el-dropdown-item>
        
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import { login } from "@/api/account";
import md5 from "js-md5";
import Cookie from "js-cookie";

export default {
  name: "loginS",
  data() {
    return {
      loginForm: {
        // tenantId: 'vehicle',
        tenantId: "pvg_vehicle",
        username: "zengfanjun",
        password: "vehicle@2025",
        type: "account",
        code: "",
        key: "",
        image:
          "",
      },
      loginRules: {
        tenantId: [
          { required: false, message: "请输入租户ID", trigger: "blur" },
        ],
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 1, message: "密码长度最少为6位", trigger: "blur" },
        ],
      },
      token: "",
      refresh_token: "",
      isChangePass: false,
      centerDialogVisible: false,
      isLogin: false,
      bigChar: false,
    };
  },
  created() {
    localStorage.clear();
  },
  computed:{
    skinText(){
       return  '主题'+this.$store.state.skin
    }
  },
  methods: {
    // 换肤
    handleCommand(index) {
        this.$store.commit('changeSkin',index)
        console.log(index);
      },
    onkeyup(event) {
      const _that = this;
      // 判断是否按键为caps Lock
      if (event.keyCode === 20) {
        _that.bigChar = !_that.bigChar;
        return;
      }
      // 按键不是caps Lock，判断每次最后输入的字母的大小写
      let e = event || window.event;
      let keyvalue = e.keyCode ? e.keyCode : e.which;
      let shifKey = this.shifKey;
      if (typeof _that.userPassword === "undefined") return;
      let userPassword = _that.userPassword;
      let strlen = userPassword.length;
      if (strlen) {
        let uniCode = userPassword.charCodeAt(strlen - 1);
        // 65到90字母键
        if (keyvalue >= 65 && keyvalue <= 90) {
          // 是否同时按住shift键
          if (
            (uniCode >= 65 && uniCode <= 90 && !shifKey) ||
            (uniCode >= 97 && uniCode <= 122 && shifKey)
          ) {
            _that.bigChar = true;
          } else {
            _that.bigChar = false;
          }
        }
      }
    },
    onkeydown(event) {
      let e = event || window.event;
      let keyvalue = e.keyCode ? e.keyCode : e.which;
      let shifKey = e.shiftKey ? e.shiftKey : keyvalue === 16;
      this.shifKey = shifKey;
    },
    async goLogin() {
      if (!this.loginForm.username && !this.loginForm.password) {
        this.$message({
          message: "请输入账号和密码!",
          type: "warning",
        });
      } else if (!this.loginForm.username && this.loginForm.password) {
        this.$message({
          message: "请输入账号!",
          type: "warning",
        });
      } else if (this.loginForm.username && !this.loginForm.password) {
        this.$message({
          message: "请输入密码!",
          type: "warning",
        });
      } else {
        let params = {
          tenantId: this.loginForm.tenantId,
          username: this.loginForm.username,
          password: md5(this.loginForm.password),
          grant_type: "password",
          scope: "all",
          type: "account",
        };
        let headers = {
          "Tenant-Id": this.loginForm.tenantId,
        };

        let res = await login(params, headers);
        const token = "bearer " + res.access_token;
        Cookie.set("token", token);
        localStorage.userId = res.user_id;
        localStorage.deptId = res.dept_id;
        localStorage.setItem("token", res.access_token);
        this.$message.success("登录成功");
        this.$router.push("/index");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  width: 100%;
  height: 100%;
  background: url("../../assets/imgs/login/login_bk1.png");
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: flex-end;

  .login-box {
    width: 500px;
    height: 580px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 260px 0 0;
    background: linear-gradient(
      0deg,
      rgba(66, 68, 145, 0.4),
      rgba(33, 83, 143, 0.08)
    );
    border: 1px solid #3971e7;
    border-radius: 8px;

    .systemName {
      width: 352px;
      height: 85px;
      background: url("../../assets/imgs/login/logo_new.png") center center
        no-repeat;
      margin: 60px 0 37px 0;
    }

    .loginForm {
      width: 360px;
      height: 400px;

      /deep/ .el-form {
        .el-form-item {
          margin-bottom: 10px;

          .el-form-item__label {
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #ffffff;
          }

          .el-input__icon {
            line-height: 54px;
          }

          .el-input__inner {
            height: 54px;
            background-color: rgba(31, 33, 64, 0.5) !important;
            border: 1px solid rgba(46, 104, 255, 0.5);
            color: #ffffff;
            font-size: 18px;
          }

          .el-icon-lock:before,
          .el-icon-user:before {
            font-size: 20px;
          }

          .el-button--primary {
            width: 100%;
            height: 54px;
            background: #3971e7;
            border: 0px;
            border-radius: 5px;
            font-size: 20px;
            font-weight: bold;
            letter-spacing: 5px;
            margin-top: 40px;
          }
        }
      }
    }
  }
}
.chageSkin{
  position: fixed;
  bottom: 30px;
  right: 30px;
}
</style>
